<template>
    <ScrollView class="homePage">
        <div>
            <!-- 轮播图  start -->
            <SwiperComp class="swiper-container" :options=" opt " :SwiperData=" swiperData ">
                <template v-slot:slide>
                    <div class="swiper-slide" v-for="(item, index) in swiperData" :key="index">
                        <img v-preload="item.image_800" alt />
                    </div>
                </template>
                <template v-slot:pagination>
                    <div class="swiper-pagination"></div>
                </template>
            </SwiperComp>
            <!-- 轮播图  end -->
            <!-- 图标分类 start -->
            <Category :num="5" :CategoryData=" categoryData1 " />
            <!-- 图标分类 start -->
            <div class="split-line">超实惠直达</div>
            <!-- 超实惠直达  start -->
            <div class="cheap">
                <div v-for="(item, index) in cheapData" :key="index" @click="toSearch(item.title)">
                    <div>
                        <p>{{item.title}}</p>
                        <p>{{item.viceTitle | remove}}</p>
                    </div>
                    <div>
                        <img v-preload="item.image" alt />
                    </div>
                </div>
            </div>
            <!-- 超实惠直达  end -->
            <div class="split-line">热门分类</div>
            <!-- 热门分类  start -->
            <Category :num="4" :CategoryData=" categoryData2 " />
            <!-- 热门分类  end -->
            <div class="split-line">猜你喜欢</div>
            <!-- 猜你喜欢  start -->
            <GoodsItem :GoodsData="goodsData" />
            <!-- 猜你喜欢  end -->
        </div>
    </ScrollView>
</template>

<script>
import GoodsItem from "../components/GoodsItem";

export default {
    data() {
        return {
            msg: "测试数据",
            opt: {
                loop: true,
                autoplay: true,
                pagination: {
                    el: ".swiper-pagination"
                }
            },
            swiperData: [],
            categoryData1: [],
            cheapData: [],
            categoryData2: [],
            goodsData: []
        };
    },
    components: {
        GoodsItem
    },
    methods: {
        setData() {
            this.$api
                .loadHomeData({
                    appPlat: "m",
                    pids: "140378,106930,51833,51836"
                })
                .then(data => {
                    this.swiperData = data[140378].list;
                    this.categoryData1 = data[106930].list;
                    this.cheapData = data[51833].list;
                    this.categoryData2 = data[51836].list;
                })
                .catch(this.$error);

            this.$api
                .loadGoodsItem({
                    pid: "9750",
                    sort: "pop",
                    cKey: 46
                })
                .then(data => {
                    // console.log(data);
                    this.goodsData = data.wall.docs;
                })
                .catch(this.$error);
        },
        toSearch(title) {
            this.$router.push({
                name: "search",
                query: {
                    q: title
                }
            });
        }
    },
    filters: {
        remove(arg) {
            let data = arg.replace(/\{|\}/g, "");
            return data;
        }
    },
    mounted() {
        this.setData();
    }
};
</script>

<style lang="less" scoped>
.grid1 {
    text-align: center;
    > div:first-child {
        height: 100% / 3;
        display: flex;
        flex-direction: column;
        justify-content: center;
        // justify-items: center;
        p:first-child {
            font-weight: bold;
            color: @black;
        }
        p:last-child {
            color: @pink;
            font-size: 28px;
        }
    }
    > div:last-child {
        height: 2 * 100% / 3;
        img {
            width: 70%;
            height: 100%;
            // object-fit: contain;
        }
    }
}

.grid2 {
    display: flex;
    flex-flow: row nowrap;
    > div:first-child {
        width: 3.5 * 100% / 5;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        p:first-child {
            font-weight: bold;
            color: @black;
        }
        p:last-child {
            color: @pink;
            font-size: 28px;
        }
    }
    > div:last-child {
        width: 1.5 * 100% / 5;
        display: flex;
        align-items: center;
        img {
            width: 100%;
            height: 55%;
            // object-fit: contain;
        }
    }
}
.homePage {
    position: absolute;
    width: 100vw;
    top: @h;
    bottom: @h;
    overflow: hidden;
    > div {
        .swiper-container {
            height: 320px;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .split-line {
            font-size: 35px;
            background-image: url("");
            background-repeat: no-repeat;
            background-size: 75% 50%;
            background-position: center;
            // background-position-y: 50%;
            text-align: center;
            font-weight: bold;
            margin: 25px 0 15px;
        }
        .grid(@row,@column) {
            grid-row: span @row;
            grid-column: span @column;
        }
        .cheap {
            display: grid;
            grid-template-rows: 200px 200px 300px;
            grid-template-columns: repeat(6, 100%/6);
            border-top: 1px solid @cc;
            border-bottom: 1px solid @cc;
            > div:nth-child(1) {
                border-right: 1px solid @cc;
                border-bottom: 1px solid @cc;
                .grid(2, 3);
                &:extend(.grid1 all);
            }
            > div:nth-child(2) {
                border-bottom: 1px solid @cc;
                .grid(1, 3);
                &:extend(.grid2 all);
            }
            > div:nth-child(3) {
                border-bottom: 1px solid @cc;
                .grid(1, 3);
                &:extend(.grid2 all);
            }
            > div:nth-child(4) {
                border-right: 1px solid @cc;
                .grid(1, 2);
                &:extend(.grid1 all);
            }
            > div:nth-child(5) {
                border-right: 1px solid @cc;
                .grid(1, 2);
                &:extend(.grid1 all);
            }
            > div:nth-child(6) {
                .grid(1, 2);
                &:extend(.grid1 all);
            }
        }
        .top-category {
            &::after {
                content: "";
                display: block;
                clear: both;
            }
            > div {
                width: 100%/4;
                float: left;
                text-align: center;
                div:first-child {
                    img {
                        width: 150px;
                        height: 150px;
                        margin-top: 15px;
                    }
                }
                div:last-child {
                    font-size: 29px;
                }
            }
        }
    }
}
</style>